<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>网格合并</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*grid布局是将父元素划分成一个个小格子，然后将小格子合并达到效果*/
        /* dispaly设置：grid默认独占一行 ,inline-grid与行内块类似*/
        .outer {
            width: 400px;
            height: 500px;
            background-color: gray;
            border: 10px solid black;
            /*改成inline-grid后,outer相当于就成了个inline-block的grid */
            display: inline-grid;

            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 100px 100px 100px;


            /* 合并单元格 */
            /* grid-column-start,grid-column-end  纵向网格开始占位与结束占位,end是开区间 */
            /* grid-row-start,grid-row-end 横向网格开始占位与结束占位,end是开区间 */

        }

        .inner {
            /* width: 50px;
            height: 50px; */
            border: 2px dashed orange;
        }

        .inner1 {
            background-color: red;
        }

        .inner2 {
            background-color: green;
            /*inner占了两列，两行,去掉inner里面的宽高会非常明显*/
            /* grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 3; */
            /*简写*/
            grid-column: 2/4;
            grid-row: 1/3;

        }

        .inner3 {
            background-color: blue;
            grid-column: 1/3;
        }

        .inner4 {
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>我是一个span</span>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner inner4">4</div>
    </div>
    <span>我是一个span</span>

</body>

</html>